<template>
  <div class="mouser">
    <div>
      <a-modal
        width="1100px"
        title="团学单位外出活动申请表"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :footer="null"
        @cancel="handleCancel"
      >
        <a-form-model ref="ruleForm" :model="form">
          <table border="1px" cellspacing="1" align="center">
            <colgroup span="6" width="100px"></colgroup>
            <col width="100px" />
            <tr height="60px" align="center">
              <td>申请部门</td>
              <td colspan="3" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="departNames" prop="departNames">
                  <a-input
                    @click="openModal"
                    placeholder="请点击选择部门"
                    v-model="form.departNames"
                    readOnly
                    :disabled="disabled"
                  >
                    <a-icon slot="prefix" type="cluster" title="部门选择控件" />
                    <a-icon v-if="form.departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
                  </a-input>
                </a-form-model-item>
              </td>
              <td>申请日期</td>
              <td colspan="2" :class="[num === 0 ? 'notclickn' : '', num === 0 ? 'mouser' : '']">
                <a-date-picker @change="onChange" v-model="form.createTime" disabled />
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>学生负责人姓名</td>
              <td colspan="3" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="userNames" prop="userNames">
                  <a-input-search
                    v-model="form.userNames"
                    placeholder="请先选择用户"
                    readOnly
                    unselectable="on"
                    @search="onSearchDepUser"
                  >
                    <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
                  </a-input-search>
                </a-form-model-item>
                <j-select-user-by-dep-modal
                  ref="selectAA"
                  :modal-width="modalWidth"
                  :multi="multi"
                  @ok="selectOK"
                  :user-ids="value"
                  @initComp="userinitComp"
                />
              </td>
              <td>联系电话</td>
              <td colspan="2" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="userPhone" prop="userPhone">
                  <a-input v-model.number="form.userPhone" placeholder="请输入手机号码" />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>带队老师姓名</td>
              <td colspan="3" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="teacherNames" prop="teacherNames">
                  <a-input-search
                    v-model="form.teacherNames"
                    placeholder="请先选择用户"
                    readOnly
                    unselectable="on"
                    @search="onSearchDepUserBB"
                  >
                    <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
                  </a-input-search>
                  <j-select-user-by-dep-modal
                    ref="selectBB"
                    :modal-width="modalWidth"
                    :multi="multi"
                    @ok="selectOKQ"
                    :user-ids="value"
                    @initComp="initComp"
                  />
                </a-form-model-item>
              </td>
              <td>联系电话</td>
              <td colspan="2" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="teacherPhone" prop="teacherPhone">
                  <a-input placeholder="请输入手机号码" v-model.number="form.teacherPhone" />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动名称 （全称）</td>
              <td colspan="6" :class="num === 0 ? 'notclickn' : ''">
                <textarea type="text" v-model="form.activityName" />
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动时间 （年 月 日）</td>
              <td colspan="3" :class="num === 0 ? 'notclickn' : ''">
                <a-date-picker v-model="form.activityDateStart" placeholder="开始时间" />
                <a-date-picker v-model="form.activityDateEnd" placeholder="结束时间" />
              </td>
              <td>出行方式（如需校车自行申请）</td>
              <td colspan="2" :class="num === 0 ? 'notclickn' : ''">
                <br />
                <a-form-model-item ref="tripMode" prop="tripMode">
                  <a-input v-model="form.tripMode" />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动地点（详细）</td>
              <td colspan="6" :class="num === 0 ? 'notclickn' : ''"><textarea v-model="form.activityAddress" /></td>
            </tr>
            <tr height="60px" align="center">
              <td>外出事由</td>
              <td colspan="6" :class="num === 0 ? 'notclickn' : ''">
                <a-form-model-item ref="service" prop="service">
                  <textarea v-model="form.service" />
                </a-form-model-item>
              </td>
            </tr>

            <tr height="120px" align="center">
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">参与活动人</span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">员组成及人数</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td colspan="6" :class="num === 0 ? 'notclickn' : ''">
                <a-form-model-item ref="peopleCounting" prop="peopleCounting">
                  <textarea v-model="form.activityPerson"></textarea>
                </a-form-model-item>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">申请单位学</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">生</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">负责人意</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">见</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px">(&nbsp;签名&nbsp;):</span>
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">申请单位</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">指导老师审</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">核</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px"
                    >(&nbsp;签名盖章&nbsp;):</span
                  >
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">校团委书记</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">团</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">审批</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px"
                    >(&nbsp;签名盖章&nbsp;):</span
                  >
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>备注</td>
              <td colspan="6" :class="num === 0 ? 'notclickn' : ''">
                <a-form-model-item ref="remark" prop="remark">
                  <textarea v-model="form.remark"></textarea>
                </a-form-model-item>
              </td>
            </tr>
          </table>
        </a-form-model>
        <div class="onlods">
          <a-button class="btn" @click="btnclick">取消</a-button>
          <a-button class="btnok" @click="btncliok" type="primary" v-if="num"> 确定 </a-button>
        </div>
      </a-modal>
    </div>
    <j-select-depart-modal
      ref="innerDepartSelectModal"
      :modal-width="modalWidth"
      :multi="multi"
      :rootOpened="rootOpened"
      :depart-id="form.departIds"
      @ok="handleOKe"
      @initComp="initCompGood"
    />
    <JSelectUserByDepModal />
  </div>
</template>

<script>
import JSelectDepartModal from '../../../components/jeecgbiz/modal/JSelectDepartModal.vue'
import JSelectUserByDepModal from '../../../components/jeecgbiz/modal/JSelectUserByDepModal'
import JSelectUserByDep from '../../../components/jeecgbiz/JSelectUserByDep'
import XSelectUserByDepModal from '../../../components/extends/XSelectUserByDepModal.vue'
import { setoutside, setoutsideByid, setoutsideList } from '../../../api/api'
import moment from 'moment'
export default {
  components: {
    XSelectUserByDepModal,
    JSelectDepartModal,
    JSelectUserByDepModal,
    JSelectUserByDep,
  },
  props: {
    id: {
      type: String,
      required: false,
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      },
    },
    visible: {
      type: Boolean,
      default: true,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    modalWidth: {
      type: Number,
      default: 500,
      required: false,
    },
    multi: {
      type: Boolean,
      default: false,
      required: false,
    },
    rootOpened: {
      type: Boolean,
      default: true,
      required: false,
    },
    modalWidth: {
      type: Number,
      default: 1250,
      required: false,
    },
    value: {
      type: String,
      required: false,
    },
    num: {
      type: Number,
      required: false,
    },
    multi: {
      type: Boolean,
      default: true,
      required: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  mixins: [JSelectUserByDep],
  data() {
    return {
      ids: '',
      dateFormat: 'YYYY/MM/DD',
      confirmLoading: false,
      
      form: {
        departNames: '', // 部门
        departIds: '', // 部门id
        userIds: '', // 负责人id
        userNames: '', // 负责人名字
        teacherNames: '', // 老师名字
        teacherIds: '', // 老师id
        item: '', // 申请时间
        activityDateStart: '', // 活动开始时间
        activityDateEnd: '', // 活动结束时间
        activityAddress: '', // 活动地点
        activityPerson: '', // 参与活动人员组成及人数
        userPhone: '', // 负责人电话
        teacherPhone: '', // 指导老师电话
        service: '', // 外出事由
        remark: '', // 备注
        tripMode: '', // 出行方式
        createTime: '', // 创建时间
        activityName: '', // 活动名称
      },
    }
  },

  created() {
    this.drawChart()
  },
  mounted() {
    ;(this.form.departIds = this.value), (this.userIds = this.value)
  },
  methods: {
    handleCancel() {
      this.$emit('handlevisible', false)
    },
    btnclick() {
      this.$emit('handlevisible', false)
    },
    btncliok() {
      setoutside({
        id: this.ids,
        activityAddress: this.form.activityAddress, // 活动地点
        activityName: this.form.activityName, // 活动名称
        activityPerson: this.form.activityPerson, //参与活动人员组成及人数
        departName: this.form.departNames, // 申请的部门  ?
        departId: this.form.departIds  , // 部门id
        director: this.form.userNames, // 负责人
        directorId: this.form.userIds, // 负责人id
        directorPhone: this.form.userPhone, //负责人电话号码
        instructor: this.form.teacherNames, // 带队老师名字
        instructorId: this.form.teacherIds, // 带队老师id
        instructorPhone: this.form.teacherPhone, // 带队老师电话
        reason: this.form.service, // 外出事由
        remark: this.form.remark, // 备注 ?
        tripMode: this.form.tripMode, // 出行方式
        activityDateStart: this.form.activityDateStart, // 活动开始时间
        activityDateEnd: this.form.activityDateEnd, // 活动结束时间
      }).then((res) => {
        this.$message.success('编辑成功')
        setTimeout(() => {
          this.confirmLoading = false
          this.$emit('handlevisible', false)
        }, 2000)
        this.$emit('searchQuery')
      })
    },
    setInstructor(data) {
      this.formData.instructor = data.name
    },
    selectOKQ(rows, idstr) {
      console.log('当前选中用户1', rows)
      console.log('当前选中用户ID1', idstr)
      if (!rows) {
        this.userNames = ''
        this.userIds = ''
      } else {
        let temp = ''
        for (let item of rows) {
          temp += ',' + item.realname
        }
        this.form.teacherNames = temp.substring(1)
        this.form.teacherIds = idstr
      }
    },

    selectOK(rows, idstr) {
      console.log('当前选中用户', rows)
      console.log('当前选中用户ID', idstr)
      if (!rows) {
        this.userNames = ''
        this.userIds = ''
        console.log(1)
      } else {
        console.log(2)
        let temp = ''
        for (let item of rows) {
          temp += ',' + item.realname
        }
        console.log(temp.substring(1))
        this.form.userNames = temp.substring(1)
        this.form.userIds = idstr
      }
    },
    userinitComp(userNames, userIds, rows) {
      ;(this.form.userNames = userNames), this.$emit('selected', { name: userNames, value: userIds, rows: rows })
    },
    initComp(teacherNames, userIds, rows) {
      ;(this.form.teacherNames = teacherNames),
        this.$emit('selected', { name: teacherNames, value: userIds, rows: rows })
    },
    onSearchDepUser() {
      this.$refs.selectAA.showModal()
    },

    onSearchDepUserBB() {
      this.$refs.selectBB.showModal()
    },

    moment,
    // 选择日期
    onChange(date, dateString) {
      this.item = dateString
    },
    onChangetow(date, dateString) {
      this.form.activityDateStart = dateString[0]
      this.form.activityDateEnd = dateString[1]
    },

    openModal() {
      // 部门组件
      this.$refs.innerDepartSelectModal.show()
    },
    // 申请的部门
    handleOKe(rows, idstr) {
      let value = ''
      if (!rows && rows.length <= 0) {
        this.form.departNames = ''
        this.form.departIds = ''
      } else {
        value = rows.map((row) => row[this.customReturnField]).join(',')
        this.form.departNames = rows.map((row) => row['departName']).join(',')
        this.form.departIds = idstr
      }
      this.$emit('change', value)
      this.$emit('selected', { name: this.form.departNames, value: this.form.departIds })
    },
    getDepartNames() {
      return this.form.departNames
    },
    handleEmpty() {
      this.handleOKe('')
    },
    initCompGood(departNames) {
      this.form.departNames = departNames

      //update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
      //TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一
      //返回字段不为id时，根据返回字段获取id
      if (this.customReturnField !== 'id' && this.value) {
        const dataList = this.$refs.innerDepartSelectModal.dataList
        console.log('this.value', this.value)
        this.form.departIds = this.value
          .split(',')
          .map((item) => {
            const data = dataList.filter((d) => d[this.customReturnField] === item)
            return data.length > 0 ? data[0].id : ''
          })
          .join(',')
      }
      //update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
    },
    drawChart() {
      setoutsideByid({ id: this.ids }).then((res) => {
        if (res.code == 0) {
          ;(this.form.departNames = res.result.departName), // 申请的部门
            (this.form.activityAddress = res.result.activityAddress), // 活动地点（详细）
            (this.form.userNames = res.result.director), // 负责人名字
            (this.form.userPhone = res.result.directorPhone), // 负责人电话
            (this.form.teacherNames = res.result.instructor), // 指导老师
            (this.form.teacherPhone = res.result.instructorPhone), // 指导老师电话
            (this.form.activityDateStart = res.result.activityDateStart), // 活动开始时间
            (this.form.activityDateEnd = res.result.activityDateEnd), // 活动结束时间
            (this.form.service = res.result.reason), // 外出事由
            (this.form.tripMode = res.result.tripMode), // 出行方式
            (this.form.remark = res.result.remark), // 备注
            (this.form.createTime = res.result.createTime), // 创建日期
            (this.form.activityPerson = res.result.activityPerson), //活动人数
            (this.form.activityName = res.result.activityName) // 活动名称
        }
      })
    },
  },

  computed: {
    task2() {
      if (this.formData && this.formData.approveRecords) {
        return this.formData.approveRecords[1] || {}
      } else {
        return {}
      }
    },
  },
  watch: {
    id: function (newval, oldval) {
      this.ids = newval
      // console.log(this.ids)
      this.drawChart()
    },
  },
}
</script>
 
<style lang = "less" scoped>
textarea {
  width: 100%;
  height: 100%;
  resize: none;
  outline-color: #d1e9ff;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}
.onlods {
  display: flex;
  margin-left: 450px;
  .btn {
    margin-top: 20px;
  }
  .btnok {
    margin-left: 10px;
    margin-top: 20px;
  }
}

input[type='text'] {
  border-style: none;
}
input[type='number'] {
  border-style: none;
}
input[type='datetime'] {
  border-style: none;
}
input[type='email'] {
  border-style: none;
}
select {
  border-style: none;
}
.notclickn {
  pointer-events: none;
}
.mouser {
  cursor: not-allowed;
}
</style>